<template>
	<view class="all">
		<!-- 占位符 -->
		<view style="width: 100%;height: 1rpx;"></view>
		<view class="back">
			<view style="width: 20rpx;"></view>
			<view @click="back">取消订单</view>
		</view>
		<view class="receipt-cont" v-if="receipt!=null">
			<view class="receipt-left">
				<view><uni-icons type="location" size="30"></uni-icons></view>
			</view>
			<view class="receipt-center">
				<view style="width: 100%;height: 40rpx;"></view>
				<view class="location">{{receipt.province}}{{receipt.city}}{{receipt.area}}{{receipt.localtion}}</view>
				<view class="name-mobail">
					<view>{{receipt.name}}</view>
					<view style="width: 10rpx;height: 50rpx;"></view>
					<view>{{receipt.mobail}}</view>
				</view>
			</view>
			<view class="receipt-right" @click="openReceipt">
			>
			</view>
		</view>
		<view class="receipt-cont" v-if="receipt==null" style="line-height: 200rpx;text-align: center;font-size: 40rpx;font-weight: 700;" @click="addReceipt">
			你还没有收货地址,点击添加
		</view>
		<view class="shop-list" v-for="item in payOrder" v-if="paytype==1">
			<view class="hearder-store" v-if="item.store!=null">{{item.store}}</view>
			<view class="hearder-store" v-if="item.store==null">商城制造</view>
			<view class="shop-cont">
				<view class="shop-image">
					<image :src="item.image" mode=""></image>
				</view>
				<view class="shop-param">
					<view class="item1">{{item.name}}</view>
					<view class="item2"><text v-if="item.style!=null">{{item.style}}</text>-<text v-if="item.size!=null">{{item.size}}</text></view>
				</view>
				<view class="price-num">
					<view></view>
					<view><text style="color: #EC7063;font-size: 24rpx;">￥</text>{{item.price}}</view>
					<view style="margin-top: 10rpx;font-size: 24rpx;color: #99A3A4;">x{{item.num}}</view>
				</view>
			</view>
		</view>
		<view class="shop-list" v-if="paytype==2">
			<view class="hearder-store" v-if="paynowform.store!=null">{{paynowform.store}}</view>
			<view class="hearder-store" v-if="paynowform.store==null">商城制造</view>
			<view class="shop-cont">
				<view class="shop-image">
					<image :src="paynowform.image" mode=""></image>
				</view>
				<view class="shop-param">
					<view class="item1">{{paynowform.name}}</view>
					<view class="item2"><text v-if="paynowform.style!=null">{{paynowform.style}}</text>-<text v-if="paynowform.size!=null">{{paynowform.size}}</text></view>
				</view>
				<view class="price-num">
					<view></view>
					<view><text style="color: #EC7063;font-size: 24rpx;">￥</text>{{paynowform.price}}</view>
					<view style="margin-top: 10rpx;font-size: 24rpx;color: #99A3A4;">x{{paynowform.num}}</view>
				</view>
			</view>
		</view>
		
		
		<!-- 占位 -->
		<view style="width: 100%;height: 1000rpx;"></view>
		<view class="bottom">
			<view style="width: 30rpx;"></view>
			<view class="bottom-left">
				<view style="color: #99A3A4;" v-if="paytype==1">共{{shopNum}}件</view>
				<view style="color: #99A3A4;" v-if="paytype==2">共{{paynowform.num}}件</view>
				<view style="margin-left: 5rpx;">合计:</view>
				<view style="font-size: 21rpx; color: #DC7633;margin-left: 5rpx;">￥</view>
				<view style="font-size: 28rpx; color: #DC7633;"v-if="paytype==1">{{allPrice}}</view>
				<view style="font-size: 28rpx; color: #DC7633;"v-if="paytype==2">{{paynowform.price}}</view>
			</view>
			<view class="bottom-right" @click="openPay">支付订单</view>
		</view>
		<view>
			<uni-popup ref="pay" type="dialog">
				<view style="width: 500rpx;height: 400rpx;background-color: #FFFFFF;border-radius: 20rpx;">
					<view style="width: 100rpx; height: 20rpx;"></view>
					<view style="width: 100%;height: 50rpx;text-align: center;line-height: 50rpx;font-size: 40rpx;">支付</view>
					<view style="width: 100%;height: 50rpx;text-align: center;line-height: 50rpx;font-size: 30rpx;color: #D35400;margin-top: 10rpx;" v-if="paytype==1">{{allPrice}}元</view>
					<view style="width: 100%;height: 50rpx;text-align: center;line-height: 50rpx;font-size: 30rpx;color: #D35400;margin-top: 10rpx;" v-if="paytype==2">{{paynowform.price}}元</view>
					
					<view class="pay-password">
						<view>支付密码</view>
						<input type="password" v-model="payPassword" :placeholder="placeholder"/>
					</view>
					<view class="pay-cont">
						<view style="width: 250rpx;height: 70rpx;border-right: 1rpx solid #A6ACAF;" @click="closePay">取消</view>
						<view style="width: 250rpx;height: 70rpx;color: #007AFF;" @click="pay" v-if="paytype==1">支付</view>
						<view style="width: 250rpx;height: 70rpx;color: #007AFF;" @click="paynow" v-if="paytype==2">支付</view>
					</view>
				</view>
			</uni-popup>
		</view>
		<view>
			<uni-popup ref="receipt" type="dialog">
				<view class="receipt-dialog">
					<view style="width: 100%;height: 100rpx;text-align: center;line-height: 100rpx;">选择收货地址</view>
					<view class="receipt-cont receipt-dialog-item" v-for="receiptItem in receiptList" @click="chooseReceipt(receiptItem)">
						<view class="receipt-left">
							<view><uni-icons type="location" size="30"></uni-icons></view>
						</view>
						<view class="receipt-center">
							<view style="width: 100%;height: 40rpx;"></view>
							<view class="location">{{receiptItem.province}}{{receiptItem.city}}{{receiptItem.area}}{{receiptItem.localtion}}</view>
							<view class="name-mobail">
								<view>{{receiptItem.name}}</view>
								<view style="width: 10rpx;height: 50rpx;"></view>
								<view>{{receiptItem.mobail}}</view>
							</view>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
		<view>
			<!-- 提示信息弹窗 -->
			<uni-popup ref="message" type="message">
				<uni-popup-message :type="msgType" :message="message" :duration="20000" style="text-align: center;"></uni-popup-message>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import store from '../../store/index.js'
	import http from "../../util/httpRequest.js"
	export default{
		data(){
			return{
				payPassword:null,
				receipt:null,
				receiptList:[],
				message:null,
				msgType:null
			}
		},
		computed:{
			payOrderIdList(){
				return store.state.common.payOrderIdList
			},
			payOrder(){
				return store.state.common.payOrder
			},
			allPrice(){
				return store.state.common.allPrice
			},
			shopNum(){
				return store.state.common.shopNum
			},
			loginInfo(){
				return store.state.common.loginInfo
			},
			paytype(){
				return store.state.common.payType
			},
			paynowform(){
				return store.state.common.paynowform
			}
			
			
		},
		methods:{
			openPay(){
				this.$refs.pay.open()
			},
			closePay(){
				this.$refs.pay.close()
			},
			//订单支付
			pay(){
				var that = this
					uni.request({
						url: http.memberUrl+"member/pay",
						method:"POST",
						data:{
							shopIdList: that.payOrderIdList,
							payPassword: that.payPassword,
							userId: that.loginInfo.userId,
							price:that.allPrice,
							receiptId:that.receipt.id
						},
						success(res) {
							if(res.data.code==0){
								console.log("支付成功")
								store.commit("payOrderIdList",[])
								store.commit("payOrder",[])
								store.commit("allPrice",null)
								store.commit("shopNum",null)
								that.payPassword=null
								that.$refs.pay.close()
								that.message=res.data.msg
								that.msgType= "success"
								that.$refs.message.open()
								setTimeout(() => {
									 //代码
									uni.reLaunch({
										url: store.state.common.router,
									})
								       
								     }, 2000);
							}
							
							if(res.data.code==500){
								// console.log(res.data.msg)
								that.message=res.data.msg
								that.msgType= "error"
								that.$refs.message.open()
							}
							
							
						}
					})
				},
				getReceiptList(){
					var that = this
						that.receiptList = []
						uni.request({
							url:http.memberUrl+"member/receipt/list",
							method:"POST",
							data:{
								userId: that.loginInfo.userId
								// userId:3
							},
							success(res) {
								// console.log(res)
								that.receiptList = res.data.list
								let list = []
								//拿到默认地址或没有默认地的第一次条数据
								if(that.receiptList.length!=0){ 
									for (let i = 0; i < that.receiptList.length; i++) {
										if(that.receiptList[i].status==0){
											list.push(that.receiptList[i])
											that.receipt = that.receiptList[i]
										}
									}
								}
								if(list.length==0){
									if(that.receiptList.length!=0){
										for (let i = 0; i < that.receiptList.length; i++) {
											that.receipt = that.receiptList[0]	
										}
									}
								}
							}
						})
				},
				openReceipt(){
					this.$refs.receipt.open()
				},
				chooseReceipt(item){
					this.receipt = item
					this.$refs.receipt.close()
				},
				back(){
					// console.log(store.state.common.router)
					uni.reLaunch({
						url: store.state.common.router,
					})
				},
				//立即支付流程不同于购物车购买，独立接口
				paynow(){
					var that = this
					uni.request({
						url: http.memberUrl+"member/paynow",
						method:"POST",
						data:{
							spuId:that.paynowform.spuId,
							price:that.paynowform.price,
							style:that.paynowform.style,
							size:that.paynowform.size,
							skuIdList:that.paynowform.skuIdList,
							image:that.paynowform.image,
							num:that.paynowform.num,
							payPassword: that.payPassword,
							userId: that.loginInfo.userId,
							receiptId:that.receipt.id
						},
						success(res) {
							if(res.data.code==0){
								// console.log("支付成功")
								store.commit("payOrderIdList",[])
								store.commit("payOrder",[])
								store.commit("allPrice",null)
								store.commit("shopNum",null)
								that.payPassword=null
								that.$refs.pay.close()
								that.message=res.data.msg
								that.msgType= "success"
								that.$refs.message.open()
								setTimeout(() => {
									uni.reLaunch({
										url: store.state.common.router,
									})
								        //代码
								     }, 2000);
								
							}
							
							if(res.data.code==500){
								// console.log(res.data.msg)
								that.message=res.data.msg
								that.msgType= "error"
								that.$refs.message.open()
							}
						}
					})
				},
				addReceipt(){
					uni.reLaunch({
						url:"/pages/info/receipt"
					})
				}
				
				
				
		},
		created() {
			this.getReceiptList()
		}
	}
</script>

<style scoped>
	.all{
		width: 100%;
		background-color: #E9E8E6;
		
	}
	.receipt-cont{
		display: flex;
		margin: 15rpx auto;
		width: 95%;
		height: 200rpx;
		border-radius: 15rpx;
		background-color: #FFFFFF;
	}
	.receipt-left{
		width: 15%;
		height: 200rpx;
		line-height: 200rpx;
		/* background-color: #007AFF; */
	}
	.receipt-left>view{
		margin-left: 20rpx;
	}
	.receipt-center{
		width: 70%;
		height: 200rpx;
		/* background-color: #007AFF */
	}
	.location{
		display:-webkit-box;
		width: 100%;
		height: 115rpx;
		font-weight: 600;
		-webkit-line-clamp:3;
		overflow:hidden;
		text-overflow:ellipsis;
		-webkit-box-orient:vertical;
		word-break:break-all;
		/* background-color: #09BB07; */
	}
	.name-mobail{
		display: flex;
		width: 100%;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 24rpx;
		
		color: #99A3A4;
		/* background-color: #F0B27A; */
	}
	.name-mobail>view{
		margin-left: 10rpx;
	}
	.receipt-right{
		width: 15%;
		height: 200rpx;
		text-align: center;
		line-height: 200rpx;
		font-size: 35rpx;
		color: #EB984E;
	}
	.shop-list{
		margin: 20rpx auto;
		width: 95%;
		height: 280rpx;
		border-radius: 15rpx;
		background-color: #FFFFFF;
	}
	.hearder-store{
		display:-webkit-box;
		margin: 0 auto;
		width: 90%;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 30rpx;
		font-weight: 600;
		-webkit-line-clamp:1;
		overflow:hidden;
		text-overflow:ellipsis;
		-webkit-box-orient:vertical;
		word-break:break-all;
		/* background-color: #007AFF; */
	}
	.shop-cont{
		display: flex;
		margin:0 auto;
		width: 90%;
		height: 200rpx;
		/* background-color: #007AFF */
		
	}
	.shop-image{
		margin-top: 20rpx;
		width: 150rpx;
		height: 160rpx;
		border-radius: 25rpx;
		
		
	}
	.shop-image>image{
		
		width: 150rpx;
		height: 160rpx;
		border-radius: 25rpx;
	}
	.shop-param{
		margin-left: 20rpx;
		margin-top: 20rpx;
		width: 330rpx;
		height: 160rpx;
		/* background-color: #F4D03F; */
	}
	.price-num{
		margin-left: 20rpx;
		margin-top: 20rpx;
		width: 120rpx;
		height: 160rpx;
		/* background-color: #1ABC9C; */
	}
	.item1{
		height: 50rpx;
		line-height: 50rpx;
		/* background-color: #007AFF; */
		font-size: 27rpx;
		display:-webkit-box;
		-webkit-line-clamp:1;
		overflow:hidden;
		text-overflow:ellipsis;
		-webkit-box-orient:vertical;
		word-break:break-all;
	}
	.item2{
		font-size: 24rpx;
		display:-webkit-box;
		-webkit-line-clamp:3;
		overflow:hidden;
		text-overflow:ellipsis;
		-webkit-box-orient:vertical;
		word-break:break-all;
		color: #B2BABB;
	}
	.price-num>view{
		width: 120rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		/* background-color: #007AFF */
	}
	.bottom{
		position: fixed;
		display: flex;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		
		background-color: #FFFFFF;
		
	}
	.bottom-left{
		display: flex;
		width: 400rpx;
		height: 80rpx;
		/* background-color: #F4D03F; */
	}
	.bottom-left>view{
		height: 80rpx;
		line-height: 80rpx;
	}
	
	.bottom-right{
		margin-top: 10rpx;
		width: 250rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 35rpx;
		border-radius: 50rpx;
		color: #FFFFFF;
		background-color: #09BB07;
	}
	.pay-password{
		width: 100%;
		height: 150rpx;
		/* background-color: #007AFF; */
	}
	.pay-password>view{
		width: 100%;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		
	}
	.pay-password>input{
		margin: 15px auto;
		width: 70%;
		height: 70rpx;
		font-size: 27rpx;
		color: #A6ACAF;
		border-radius: 10rpx;
		text-align: center;
		border: 1rpx solid #A6ACAF;
	}
	.pay-cont{
		display: flex;
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		
		font-size: 30rpx;
		border-top: 1rpx solid #A6ACAF;
		/* background-color: #18BC37 */
	}
	.receipt-dialog{
		width: 700rpx;
		max-height: 700rpx;
		border-radius: 15rpx;
		overflow-y: auto;
		background-color: #FFFFFF;
	}
	.receipt-dialog-item{
		width: 95%;
		height: 200rpx;
		/* background-color: #007AFF */
		border: 1rpx solid #AAB7B8;
	}
	.receipt-dialog-item:active{
		background-color: #007AFF
	}
	.back{
		display: flex;
		height: 60rpx;
		line-height: 60rpx;
		/* background-color: #007AFF; */
	}
	.back:active{
		color: #09BB07;
	}
	
	
</style>
